<div class="p">
    <div class="row">
        <div class="span-6 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">按钮</div>
                </div>
                <div class="card-body">
                    <a href="###" class="btn btn-default">普通</a>
                    <a href="###" class="btn btn-primary">主色</a>
                    <a href="###" class="btn btn-auxiliary">辅色</a>
                    <a href="###" class="btn btn-success">成功</a>
                    <a href="###" class="btn btn-info">信息</a>
                    <a href="###" class="btn btn-warning">警告</a>
                    <a href="###" class="btn btn-danger">危险</a>
                    <a href="###" class="btn btn-link">链接</a>
                </div>
            </div>
        </div>
        <div class="span-6 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">按钮</div>
                </div>
                <div class="card-body">
                    <a href="###" class="btn btn-ghost btn-default">普通</a>
                    <a href="###" class="btn btn-ghost btn-primary">主色</a>
                    <a href="###" class="btn btn-ghost btn-auxiliary">辅色</a>
                    <a href="###" class="btn btn-ghost btn-success">成功</a>
                    <a href="###" class="btn btn-ghost btn-info">信息</a>
                    <a href="###" class="btn btn-ghost btn-warning">警告</a>
                    <a href="###" class="btn btn-ghost btn-danger">危险</a>
                    <a href="###" class="btn btn-ghost btn-link">链接</a>
                </div>
            </div>
        </div>
        <div class="span-6 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">按钮</div>
                </div>
                <div class="card-body">
                    <a href="###" class="btn btn-default"><i class="ion">&#xe66a;</i> 普通</a>
                    <a href="###" class="btn btn-primary"><i class="ion">&#xe691;</i> 主色</a>
                    <a href="###" class="btn btn-auxiliary"><i class="ion">&#xe637;</i> 辅色</a>
                    <a href="###" class="btn btn-success"><i class="ion">&#xe924;</i> 成功</a>
                    <a href="###" class="btn btn-info"><i class="ion">&#xe61c;</i> 信息</a>
                    <a href="###" class="btn btn-warning"><i class="ion">&#xe60d;</i> 警告</a>
                    <a href="###" class="btn btn-danger"><i class="ion">&#xe623;</i> 危险</a>
                    <a href="###" class="btn btn-link"><i class="ion">&#xe669;</i> 链接</a>
                </div>
            </div>
        </div>
        <div class="span-6 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">按钮</div>
                </div>
                <div class="card-body">
                    <a href="###" class="btn btn-ghost btn-default"><i class="ion">&#xe66a;</i> 普通</a>
                    <a href="###" class="btn btn-ghost btn-primary"><i class="ion">&#xe691;</i> 主色</a>
                    <a href="###" class="btn btn-ghost btn-auxiliary"><i class="ion">&#xe637;</i> 辅色</a>
                    <a href="###" class="btn btn-ghost btn-success"><i class="ion">&#xe924;</i> 成功</a>
                    <a href="###" class="btn btn-ghost btn-info"><i class="ion">&#xe61c;</i> 信息</a>
                    <a href="###" class="btn btn-ghost btn-warning"><i class="ion">&#xe60d;</i> 警告</a>
                    <a href="###" class="btn btn-ghost btn-danger"><i class="ion">&#xe623;</i> 危险</a>
                    <a href="###" class="btn btn-ghost btn-link"><i class="ion">&#xe669;</i> 链接</a>
                </div>
            </div>
        </div>
        <div class="span-6 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">按钮</div>
                </div>
                <div class="card-body">
                    <a href="###" class="btn btn-block btn-primary">块级按钮</a>
                </div>
            </div>
        </div>
        <div class="span-6 m-b">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">按钮</div>
                </div>
                <div class="card-body">
                    <a href="###" class="btn btn-lg btn-primary">大</a>
                    <a href="###" class="btn btn-primary">中</a>
                    <a href="###" class="btn btn-sm btn-primary">小</a>
                </div>
            </div>
        </div>
    </div>
</div>
